<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .border-progress{
    height: 10px;
    width: 100%;
    background-color: aqua;
    cursor: move;
  }
  .drag{
    width: 400px;
    height: 300px;
    background-color: yellow;
    position: fixed;
    left:300px;
    top: 100px;
    right: auto;
  }
</style>
<body>
  <ul>
    <li> drag</li>
    <li class="drag-client-x">clientX:<span></span></li>
    <li class="drag-client-y">clientY:<span></span></li>
   </ul>
   <ul>
    <li> 变化后</li>
    <li class="drag-client-x-end">clientX:<span></span></li>
    <li class="drag-client-y-end">clientY:<span></span></li>
   </ul>

<ul>
 <li> border-progress</li>
 <li class="bar-client-x">clientX:<span></span></li>
 <li class="bar-client-y">clientY:<span></span></li>
</ul>
  <div class="drag-bq">
      <div class="drag">
        <div class="border-progress">

        </div>
        <header>  这是一个便签</header>
        <article>里面的文字可以更改</article>
        <footer>用鼠标按住顶部的移动条即可以拖动便签</footer>
      </div>
  </div>
  <script src="index.js"></script>
</body>
</html>